html, body {
    margin: 0;
    height: 100%;
}

body {
    background-color: rgb(199, 213, 235);
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
  
.middle {
    display: table-cell;
    vertical-align: middle;
}
  
.inner {
    margin-left: auto;
    margin-right: auto;
}

.bg-container {
    background-image: url(../background/background2025.png);
    background-size: contain;
    height: 904px;
    width: 1599px;
    border: 5px solid black;
    box-sizing: border-box;
    margin: auto;
}

.footer {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 4px;
}

.info > a,
.author > a {
    color:black;
}

.button {
  height: 17px;
}

.yt-player {
    position: absolute;
    bottom: 8px;
    right: 5px;
    display: flex;
}

.yt-label {
    left: 50px;
    position: relative;
}

.grid-1 {
    display: flex;
}

section div {
    background: transparent;
}

/* door styles */
.grid-1 input {
    display: none;
}

.label-circle {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;

    display: flex;
    min-height: 100%;
    width: 100%;
    border-radius: 50%;
}

.door-circle {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 700ms;
    border: 1px solid transparent;
    border-radius: 50%;
}

.door-circle div {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.door-circle .back {
    transform: rotateY(180deg);
}

label:hover .door-circle {
    border-color: black;
    transform: rotateY(180deg);
}
   
:checked + .door-circle {
    transform: rotateY(180deg);
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}


/* individual items */
.day-1 {
    position: absolute;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    margin-left: 25px;
    margin-top: 41px;
}

.day-1 .back {
    background: url(../doors/Door01.png);
    background-size: cover;
    background-position: bottom;
}

.day-2 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 461px;
    margin-top: 18px;
}

.day-2 .back {
    background: url(../doors/Door02.png);
    background-size: cover;
    background-position: center;
}

.day-3 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 898px;
    margin-top: 14px;
}

.day-3 .back {
    background: url(../doors/Door03.png);
    background-size: cover;
    background-position: top;
}

.day-4 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 1172px;
    margin-top: 73px;
}

.day-4 .back {
    background: url(../doors/Door04.png);
    background-size: cover;
    background-position: top;
}

.day-5 {
    position: absolute;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    margin-left: 1509px;
    margin-top: 16px;
}

.day-5 .back {
    background: url(../doors/Door05.png);
    background-size: cover;
    background-position: center;
}

.day-6 {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-left: 1273px;
    margin-top: 249px;
}

.day-6 .back {
    background: url(../doors/Door06.png);
    background-size: cover;
    background-position: center;
}

.day-7 {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-left: 947px;
    margin-top: 223px;
}

.day-7 .back {
    background: url(../doors/Door07.png);
    background-size: cover;
    background-position: top;
}

.day-8 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 609px;
    margin-top: 177px;
}

.day-8 .back {
    background: url(../doors/Door08.png);
    background-size: cover;
    background-position: bottom;
}

.day-9 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 97px;
    margin-top: 227px;
}

.day-9 .back {
    background: url(../doors/Door09.png);
    background-size: cover;
    background-position: center;
}

.day-10 {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-left: 461px;
    margin-top: 305px;
}

.day-10 .back {
    background: url(../doors/Door10.png);
    background-size: cover;
    background-position: bottom;
}

.day-11 {
    position: absolute;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    margin-left: 752px;
    margin-top: 309px;
}

.day-11 .back {
    background: url(../doors/Door11.png);
    background-size: cover;
    background-position: top;
}

.day-12 {
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin-left: 934px;
    margin-top: 436px;
}

.day-12 .back {
    background: url(../doors/Door12.png);
    background-size: cover;
    background-position: center;
}

.day-13 {
    position: absolute;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    margin-left: 1258px;
    margin-top: 509px;
}

.day-13 .back {
    background: url(../doors/Door13.png);
    background-size: cover;
    background-position: top;
}

.day-14 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 1403px;
    margin-top: 594px;
}

.day-14 .back {
    background: url(../doors/Door14.png);
    background-size: cover;
    background-position: center;
}

.day-15 {
    position: absolute;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    margin-left: 1345px;
    margin-top: 814px;
}

.day-15 .back {
    background: url(../doors/Door15.png);
    background-size: cover;
    background-position: top;
}

.day-16 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 1216px;
    margin-top: 665px;
}

.day-16 .back {
    background: url(../doors/Door16.png);
    background-size: cover;
    background-position: center;
}

.day-17 {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-left: 862px;
    margin-top: 676px;
}

.day-17 .back {
    background: url(../doors/Door17.png);
    background-size: cover;
    background-position: top;
}

.day-18 {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-left: 881px;
    margin-top: 802px;
}

.day-18 .back {
    background: url(../doors/Door18.png);
    background-size: cover;
    background-position: top;
}

.day-19 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 725px;
    margin-top: 740px;
}

.day-19 .back {
    background: url(../doors/Door19.png);
    background-size: cover;
    background-position: bottom;
}

.day-20 {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-left: 524px;
    margin-top: 797px;
}

.day-20 .back {
    background: url(../doors/Door20.png);
    background-size: cover;
    background-position: top;
}

.day-21 {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-left: 187px;
    margin-top: 825px;
}

.day-21 .back {
    background: url(../doors/Door21.png);
    background-size: cover;
    background-position: top;
}

.day-22 {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-left: 19px;
    margin-top: 735px;
}

.day-22 .back {
    background: url(../doors/Door22.png);
    background-size: cover;
    background-position: top;
}

.day-23 {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-left: 1px;
    margin-top: 553px;
}

.day-23 .back {
    background: url(../doors/Door23.png);
    background-size: cover;
    background-position: top;
}

.day-24 {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-left: 268px;
    margin-top: 375px;
}

.day-24 .back {
    background: url(../doors/Door24.png);
    background-size: cover;
    background-position: center left;
}

.secret-1 {
  position: absolute;
  width: 47px;
  height: 90px;
  margin-left: 1520px;
  margin-top: 246px;
}

.secret-2 {
  position: absolute;
  width: 61px;
  height: 23px;
  margin-left: 542px;
  margin-top: 523px;
  rotate: -23deg;
}

.secret-3 {
  position: absolute;
  width: 108px;
  height: 60px;
  margin-left: 825px;
  margin-top: 113px;
}

.secret-4 {
  position: absolute;
  width: 28px;
  height: 19px;
  margin-left: 832px;
  margin-top: 510px;
}

.secret-5 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-left: 1381px;
  margin-top: 4px;
}

.secret-6 {
  position: absolute;
  width: 39px;
  height: 71px;
  margin-left: 699px;
  margin-top: 133px;
  rotate: 27deg;
}

.secret-7 {
  position: absolute;
  width: 40px;
  height: 36px;
  margin-left: 1130px;
  margin-top: 506px;
}

.secret-1::hover,
.secret-2::hover,
.secret-3::hover,
.secret-4::hover,
.secret-5::hover,
.secret-6::hover,
.secret-7::hover {
  cursor: pointer;
}

.secret-1 > a,
.secret-2 > a,
.secret-3 > a,
.secret-4 > a,
.secret-5 > a,
.secret-6 > a,
.secret-7 > a {
  height: 100%;
  width: 100%;
  display: block;
}